<template>
    <div class="app-container">
        <div class="filter-container">
            <DatePicker :query-model="listQuery" style="width: 230px" @change="handleFilter" />
            <el-input v-model="listQuery.username" class="filter-item" clearable placeholder="服务主体名称" style="width: 150px" @keyup.enter.native="handleFilter" />

            <el-input v-model="listQuery.username" class="filter-item" clearable placeholder="街道名称" style="width: 150px" @keyup.enter.native="handleFilter" />

            <DictSelect v-model="listQuery.equipmentUseStatus" placeholder="服务主体类型" type="service-principal-type" />

            <DictSelect v-model="listQuery.equipmentUseStatus" placeholder="服务状态" type="service-status" />
            <el-input v-model="listQuery.username" class="filter-item" clearable placeholder="联系人名称" style="width: 150px" @keyup.enter.native="handleFilter" />

            <el-input v-model="listQuery.username" class="filter-item" clearable placeholder="联系人电话" style="width: 150px" @keyup.enter.native="handleFilter" />

            <el-button v-waves style="margin-right: 153px; float: right" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>

            <el-button v-waves type="primary" icon="el-icon-plus" @click="createServiceProvider()">创建服务商</el-button>
        </div>

        <el-table :key="tableKey" :data="list" fit highlight-current-row>
            <el-table-column label="街道id" prop="id" align="center" />
            <el-table-column label="街道名称" prop="associatedStreetName" align="center" />
            <el-table-column label="关联社区" prop="associatedCommunity" align="center" />
            <!-- 关联设备展示数量 -->
            <el-table-column label="关联设备" prop="associatedCommunity" align="center" />

            <el-table-column label="服务状态" prop="serviceStatus" :formatter="getServiceStatus" align="center" />
            <el-table-column label="操作" align="center" width="500px">
                <template slot-scope="{ row }">
                    <el-button v-waves v-permission="['sys:role:list']" type="primary" @click="update(row.id)">基础信息</el-button>

                    <el-button v-waves v-permission="['sys:role:save']" style="margin-left: 10px" type="primary" @click="openProductNode(row.id, row.typeName, row.typeId)">暂停服务</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="listQuery.pageNo" :limit.sync="listQuery.pageSize" @pagination="getList" />

        <!-- 以下是添加服务商 dialog -->
        <el-dialog title="设备录入" :visible.sync="dialogAddOrUpdateServiceProvider" width="75%">
            <el-form ref="dataForm">
                <el-form-item label="主体名称:" :label-width="formLabelWidth" prop="serviceProviderName">
                    <el-input style="width: 193px" v-model="serviceProvider.serviceProviderName" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>

            <el-form ref="dataForm">
                <el-form-item label="统一社会信用代码:" :label-width="formLabelWidth" prop="unifiedSocialCreditCode">
                    <el-input style="width: 193px" v-model="serviceProvider.unifiedSocialCreditCode" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>

            <el-form ref="dataForm">
                <el-form-item label="地址:" :label-width="formLabelWidth" prop="address">
                    <el-input style="width: 193px" v-model="serviceProvider.address" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>

            <el-form ref="dataForm">
                <el-form-item label="上传营业执照:" :label-width="formLabelWidth" prop="businessLicensePictureList">
                    <el-upload ref="pictureUploadBusinessLicense" :action="uploadPath" :headers="headers" :on-success="handleExcelSuccessBusinessLicense" list-type="picture-card" :auto-upload="true">
                        <i slot="default" class="el-icon-plus"></i>
                        <div slot="file" slot-scope="{ file }">
                            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                            <span class="el-upload-list__item-actions">
                                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                    <i class="el-icon-zoom-in"></i>
                                </span>

                                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemoveBusinessLicense(file)">
                                    <i class="el-icon-delete"></i>
                                </span>
                            </span>
                        </div>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="" />
                    </el-dialog>
                </el-form-item>
            </el-form>

            <el-form ref="dataForm">
                <el-form-item label="法人代表:" :label-width="formLabelWidth" prop="legalRepresentative">
                    <el-input style="width: 193px" v-model="serviceProvider.legalRepresentative" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>

            <el-form ref="dataForm">
                <el-form-item label="法人代表身份证号:" :label-width="formLabelWidth" prop="legalRepresentativeIdCard">
                    <el-input style="width: 193px" v-model="serviceProvider.legalRepresentativeIdCard" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>

            <el-form ref="dataForm">
                <el-form-item label="上传法人身份证:" :label-width="formLabelWidth" prop="idCardPictureList">
                    <el-upload ref="pictureUploadLegalPerson" :action="uploadPath" :headers="headers" :on-success="handleExcelSuccessLegalPerson" list-type="picture-card" :auto-upload="true">
                        <i slot="default" class="el-icon-plus"></i>
                        <div slot="file" slot-scope="{ file }">
                            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                            <span class="el-upload-list__item-actions">
                                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                    <i class="el-icon-zoom-in"></i>
                                </span>

                                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemoveLegalPerson(file)">
                                    <i class="el-icon-delete"></i>
                                </span>
                            </span>
                        </div>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="" />
                    </el-dialog>
                </el-form-item>
            </el-form>

            <el-form ref="dataForm">
                <el-form-item label="联系人姓名:" :label-width="formLabelWidth" prop="contactPersonName">
                    <el-input style="width: 193px" v-model="serviceProvider.contactPersonName" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>

            <el-form ref="dataForm">
                <el-form-item label="联系人身份证号:" :label-width="formLabelWidth" prop="contactPersonIdCard">
                    <el-input style="width: 193px" v-model="serviceProvider.contactPersonIdCard" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>

            <el-form ref="dataForm">
                <el-form-item label="联系手机号:" :label-width="formLabelWidth" prop="contactWay">
                    <el-input style="width: 193px" v-model="serviceProvider.contactWay" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>

            <el-form ref="dataForm">
                <el-form-item label="联系地址:" :label-width="formLabelWidth" prop="contactAddress">
                    <el-input style="width: 193px" v-model="serviceProvider.contactAddress" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <!-- {{ serviceProvider.contactIdAndCompanyRelationCertificateFileIdList }} -->
            <el-form ref="dataForm">
                <el-form-item label="上传联系人身份证及公司关系证明:" :label-width="formLabelWidth" prop="contactIdAndCompanyRelationCertificateFileIdList">
                    <el-upload ref="pictureUpload" :action="uploadPath" :headers="headers" :on-success="handleExcelSuccess" list-type="picture-card" :auto-upload="true">
                        <i slot="default" class="el-icon-plus"></i>
                        <div slot="file" slot-scope="{ file }">
                            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                            <span class="el-upload-list__item-actions">
                                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                    <i class="el-icon-zoom-in"></i>
                                </span>

                                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                                    <i class="el-icon-delete"></i>
                                </span>
                            </span>
                        </div>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="" />
                    </el-dialog>
                </el-form-item>
            </el-form>

            <el-form ref="dataForm">
                <el-form-item label="关联街道:" :label-width="formLabelWidth" prop="associatedStreetName">
                    <el-input style="width: 193px" v-model="serviceProvider.associatedStreetName" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>

            <el-form ref="dataForm">
                <el-form-item label="关联社区:" :label-width="formLabelWidth" prop="associatedCommunity">
                    <el-input style="width: 193px" v-model="serviceProvider.associatedCommunity" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>

            <div style="text-align: center" slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogAddOrUpdateEquipmentSubmit()">确 定</el-button>
                <el-button @click="dialogAddOrUpdateServiceProvider = false">取 消</el-button>
            </div>
        </el-dialog>
        <!-- 以上是添加服务商 dialog -->
    </div>
</template>

<script>
import {
    getList,
    addOrUpdateServiceProvider
} from "@/api/service-provider/index.js";
import { upload } from "@/api/common/index.js";
import waves from "@/directive/waves"; // Waves directive
import DictSelect from "@/components/DictSelect";
import DatePicker from "@/components/DatePicker";
import { getToken, getTokenName } from "@/utils/auth";
export default {
    name: "LogTable",
    directives: { waves },
    filters: {},
    components: {
        DatePicker,
        DictSelect
    },
    data() {
        return {
            tableKey: 0,
            list: null,
            total: 0,
            listQuery: {
                pageNo: 1,
                pageSize: 10,
                orderByField: "createdAt",
                orderBy: "desc"
            },
            dialogAddOrUpdateServiceProvider: false,
            formLabelWidth: "150px",

            //新添加的服务商或者修改的服务商
            serviceProvider: {
                //联系人身份证及公司关系证明文件id 数组
                contactIdAndCompanyRelationCertificateFileIdList: [],
                //法人身份证 文件id 数组
                idCardPictureList: [],
                //营业执照 文件id 数组
                businessLicensePictureList: []
            },

            //上传图片相关
            dialogImageUrl: "",
            dialogVisible: false,
            disabled: false,

            //上传的服务器
            uploadPath: "",
            headers: {} //请求图片上传的头部
        };
    },
    created() {
        this.getList();

        //加载上传的地址
        this.uploadPath = upload();

        //初始化加载头部信息
        this.headers[getTokenName()] = getToken();
    },
    methods: {
        // 获取数据

        //创建服务商
        createServiceProvider() {
            this.dialogAddOrUpdateServiceProvider = true;
        },

        //创建或者添加服务商  提交按钮
        dialogAddOrUpdateEquipmentSubmit() {
            addOrUpdateServiceProvider(this.serviceProvider).then(() => {
                //获取新的消息
                this.getList();
                this.dialogAddOrUpdateServiceProvider = false;
            });
        },

        // 移除联系人的图片  (正统的例子)
        handleRemove(file) {
            let uploadFiles = this.$refs.pictureUpload.uploadFiles;
            for (var i = 0; i < uploadFiles.length; i++) {
                if (uploadFiles[i]["url"] == file.url) {
                    uploadFiles.splice(i, 1);

                    var thisArry = this.serviceProvider
                        .contactIdAndCompanyRelationCertificateFileIdList;
                    var fileId = file.response.data.f_id;

                    //移除vue 里面将上传的 后端的 fileId数组
                    thisArry.splice(
                        thisArry.findIndex(e => e === fileId),
                        1
                    );
                }
            }
        },

        // 移除法人身份证 的图片
        handleRemoveLegalPerson(file) {
            let uploadFiles = this.$refs.pictureUploadLegalPerson.uploadFiles;
            for (var i = 0; i < uploadFiles.length; i++) {
                if (uploadFiles[i]["url"] == file.url) {
                    uploadFiles.splice(i, 1);

                    var thisArry = this.serviceProvider.idCardPictureList;
                    var fileId = file.response.data.f_id;

                    //移除vue 里面将上传的 后端的 fileId数组
                    thisArry.splice(
                        thisArry.findIndex(e => e === fileId),
                        1
                    );
                }
            }
        },

        //移除营业执照 图片
        handleRemoveBusinessLicense(file) {
            let uploadFiles = this.$refs.pictureUploadBusinessLicense
                .uploadFiles;
            for (var i = 0; i < uploadFiles.length; i++) {
                if (uploadFiles[i]["url"] == file.url) {
                    uploadFiles.splice(i, 1);

                    var thisArry = this.serviceProvider
                        .businessLicensePictureList;
                    var fileId = file.response.data.f_id;

                    //移除vue 里面将上传的 后端的 fileId数组
                    thisArry.splice(
                        thisArry.findIndex(e => e === fileId),
                        1
                    );
                }
            }
        },

        //handleRemove (file) { this.$refs.pictureUpload.uploadFiles = [] this.infoFrom.out_img = '' },
        //展示文件
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },

        //下载文件
        handleDownload(file) {
            console.log(file);
        },

        //上传联系人身份证及公司关系证明 成功回调
        handleExcelSuccess(response, file, fileList) {
            if (response.code !== 0) {
                this.$message.error(response.msg);
            } else {
                //数组添加数据
                this.serviceProvider.contactIdAndCompanyRelationCertificateFileIdList.push(
                    response.data.f_id
                );

                //this.getList();
            }
        },

        //上传法人身份证 成功回调
        handleExcelSuccessLegalPerson(response, file, fileList) {
            if (response.code !== 0) {
                this.$message.error(response.msg);
            } else {
                //数组添加数据
                this.serviceProvider.idCardPictureList.push(response.data.f_id);

                //this.getList();
            }
        },

        //上传营业执照 成功回调
        handleExcelSuccessBusinessLicense(response, file, fileList) {
            if (response.code !== 0) {
                this.$message.error(response.msg);
            } else {
                //数组添加数据
                this.serviceProvider.businessLicensePictureList.push(
                    response.data.f_id
                );

                //this.getList();
            }
        },

        //获取服务状态   1服务中 2已暂停
        getServiceStatus(row, column) {
            const status = row[column.property];
            if (status != null) {
                //1服务中 2已暂停
                if (status == 1) {
                    return "服务中";
                } else if (status == 2) {
                    return "已暂停";
                }
            } else {
                return "";
            }
        },

        //加载首页数据
        getList() {
            getList(this.listQuery).then(response => {
                this.list = response.list;
                this.total = response.totalCount;
            });
        },
        handleFilter() {
            this.listQuery.pageNo = 1;
            this.getList();
        }
    }
};
</script>
